<template>
  <a-layout class="page-miH page-bgBack">
    <div class="head">
      <div class="operation">
        <a-month-picker placeholder="选择月份" :default-value="moment(now, 'YYYY-MM')" @change="monthChange" :allowClear="false" />
        <a-input-search
          allow-clear
          class="mr12"
          placeholder="用工单位/负责人"
          style="width: 180px; margin-left: 10px"
          @search="inputChange"
        />
        <a-popover trigger="click" placement="bottom" style="cursor: pointer" v-model="popoverShow">
          <div slot="content" style="width: 910px; height: 220px">
            <div style="display: flex; padding: 16px">
              <div>
                <div style="font-size: 14px; font-weight: 400; color: #636363">开票状态</div>
                <a-select style="width: 180px; margin-top: 6px" @change="handleChange" placeholder="请选择" :allowClear="true">
                  <a-select-option value="1"> 未开票 </a-select-option>
                  <a-select-option value="2"> 全部开票 </a-select-option>
                  <a-select-option value="3"> 部分开票 </a-select-option>
                </a-select>
              </div>
              <div style="margin-left: 12px">
                <div style="font-size: 14px; font-weight: 400; color: #636363">回款状态</div>
                <a-select style="width: 180px; margin-top: 6px" @change="handleChange2" placeholder="请选择" :allowClear="true">
                  <a-select-option value="1"> 未回款 </a-select-option>
                  <a-select-option value="2"> 全部回款 </a-select-option>
                  <a-select-option value="3"> 部分回款 </a-select-option>
                </a-select>
              </div>
            </div>
            <div style="display: flex; margin-top: 16px">
              <div style="margin-left: 12px">
                <div>应回款金额筛选</div>
                <div style="display: flex; margin-top: 6px; align-items: center">
                  <a-input-number :min="0" v-model="amountParams.totalAmountStart" placeholder="请选择" />
                  <div>-</div>
                  <a-input-number
                    :min="amountParams.totalAmountStart ? amountParams.totalAmountStart : 0"
                    v-model="amountParams.totalAmountEnd"
                    placeholder="请选择"
                  />
                </div>
              </div>
              <div style="margin-left: 12px">
                <div>已到账金额筛选</div>
                <div style="display: flex; margin-top: 6px; align-items: center">
                  <a-input-number :min="0" v-model="amountParams.amountPaidStart" placeholder="请选择" />
                  <div>-</div>
                  <a-input-number
                    :min="amountParams.amountPaidStart ? amountParams.amountPaidStart : 0"
                    v-model="amountParams.amountPaidEnd"
                    placeholder="请选择"
                  />
                </div>
              </div>
              <div style="margin-left: 12px">
                <div>未到账金额筛选</div>
                <div style="display: flex; margin-top: 6px; align-items: center">
                  <a-input-number :min="0" v-model="amountParams.unpaidAmountStart" placeholder="请选择" />
                  <div>-</div>
                  <a-input-number
                    :min="amountParams.unpaidAmountStart ? amountParams.unpaidAmountStart : 0"
                    v-model="amountParams.unpaidAmountEnd"
                    placeholder="请选择"
                  />
                </div>
              </div>
            </div>
            <div style="display: flex; justify-content: flex-end; margin-top: 24px">
              <a-button @click="popoverShow = false">取消</a-button>
              <a-button @click="popoverOk" type="primary" style="margin-left: 12px">查询</a-button>
            </div>
          </div>
          <a-button><a-icon type="filter" /></a-button>
        </a-popover>
      </div>
      <div>
        <a-button type="primary" style="margin-right: 10px" @click="download()"> 导出 </a-button>
        <a-button type="primary" style="margin-right: 10px" @click="showAdd()"> <a-icon type="plus" />新增记录 </a-button>
      </div>
    </div>
    <div class="tableBox">
      <a-table
        rowKey="id"
        :scroll="{ x: 1500 }"
        :loading="loading"
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <a slot="companyName" style="position: relative" slot-scope="text, record">
          <img
            :src="abolitionImg"
            v-if="record.isVoid === false"
            style="position: absolute; top: -16px; left: -15px; width: 50px; height: 50px"
          />
          <p style="margin-left: 20px; margin-bottom: 0">
            {{ text }}
          </p>
        </a>

        <a slot="unpaidAmount" slot-scope="text">
          <span style="color: #ec5252" v-if="text > 0">{{ text }}</span>
          <span style="color: #55565d" v-if="text <= 0">{{ text }}</span>
        </a>
        <a slot="uninvoicedAmount" slot-scope="text">
          <span style="color: #ec5252" v-if="text > 0">{{ text }}</span>
          <span style="color: #55565d" v-if="text <= 0">{{ text }}</span>
        </a>
        <div slot="payBackStatus" slot-scope="text">
          <span v-if="text === 1" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #a0a0a0" />
            <span style="margin-left: 5px">未回款</span>
          </span>
          <span v-if="text === 2" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #24cdaa" />
            <span style="margin-left: 5px">全部回款</span></span
          >
          <span v-if="text === 3" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #ffa600" />
            <span style="margin-left: 5px">部分回款</span></span
          >
        </div>
        <div slot="invoiceStatus" slot-scope="text">
          <span v-if="text === 1" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #a0a0a0" />
            <span style="margin-left: 5px">未开票</span>
          </span>
          <span v-if="text === 2" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #24cdaa" />
            <span style="margin-left: 5px">全部开票</span></span
          >
          <span v-if="text === 3" style="display: flex; align-items: center">
            <div style="border-radius: 50%; height: 4px; width: 4px; background: #ffa600" />
            <span style="margin-left: 5px">部分开票</span></span
          >
        </div>
        <a slot="payBackDate" slot-scope="text">
          {{ text ? moment(text).format("YYYY-MM-DD") : "-" }}
        </a>
        <div slot="monthly" slot-scope="text, record">
          <span v-if="text >= 10">{{ record.yearly }}-{{ text }}</span>
          <span v-if="text < 10">{{ record.yearly }}-0{{ text }}</span>
        </div>
        <a slot="action" class="primary_color" slot-scope="text, record">
          <span class="primary" @click="goDetail(record)"> 详情 </span>
          <a-divider type="vertical" />
          <span class="primary" @click="showAbolition(record)"> 删除 </span>
        </a>
      </a-table>
      <!-- 回款 -->
      <a-modal
        v-model="receivableVisible"
        :title="isBackShow ? '回款' : '回款记录'"
        @ok="handleReceivableOk"
        @cancel="handleCancel"
        :width="700"
      >
        <a-row class="header-title" v-if="isBackShow">
          <div class="title-info">回款信息</div>
          <hr class="title-line" />
        </a-row>
        <a-form-model
          ref="ruleForm"
          v-if="isBackShow"
          :model="receivableForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          style="margin-top: 15px"
        >
          <a-form-model-item
            ref="receiveAmount"
            label="本次实际到账金额"
            prop="receiveAmount"
            :rules="{
              required: true,
              message: '请输入'
            }"
          >
            <a-input-number :min="0" :max="999999" v-model="receivableForm.receiveAmount" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item
            ref="payBackDate"
            label="本次回款时间"
            prop="payBackDate"
            :rules="{
              required: true,
              message: '请选择'
            }"
          >
            <a-date-picker
              :disabled-date="disabledDate"
              placeholder="选择回款时间"
              @change="onChange"
              @ok="onOk"
              v-model="receivableForm.payBackDate"
              style="width: 320px"
            />
          </a-form-model-item>
          <a-form-model-item ref="file" label="银行回单" prop="file">
            <a-upload
              accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg, .jpeg, .png"
              :before-upload="beforeUpload"
              list-type="picture"
              class="upload-list-inline"
              :fileList="fileList"
              :default-file-list="[]"
              @change="upLoad"
            >
              <a-button> <a-icon type="upload" /> 点击上传 </a-button>
            </a-upload>
          </a-form-model-item>
          <a-form-model-item ref="remark" label="备注" prop="remark">
            <a-input v-model="receivableForm.remark" type="textarea" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
        <a-row class="header-title" v-if="isBackShow">
          <div class="title-info">回款到账记录</div>
          <hr class="title-line" />
        </a-row>
        <a-table
          rowKey="id"
          :loading="loading2"
          :columns="receivableColumns"
          :data-source="receivableList"
          :pagination="false"
          :scroll="{ y: 120 }"
          style="margin-top: 10px"
        >
          <a slot="action" slot-scope="text, record" class="primary_color">
            <a-popconfirm :title="'确定删除吗?'" @confirm="deleteBack(record)"> 删除 </a-popconfirm>
          </a>
          <a slot="payBackDate" slot-scope="text">
            {{ text ? moment(text).format("YYYY-MM-DD") : "-" }}
          </a>
        </a-table>
      </a-modal>
      <!-- 开票 -->
      <a-modal
        v-model="ticketVisible"
        :title="isticketShow ? '开票' : '发票作废'"
        @ok="handleTicketOk"
        @cancel="handleCancel2"
        :width="700"
      >
        <a-row class="header-title" v-if="isticketShow">
          <div class="title-info">开票信息</div>
          <hr class="title-line" />
        </a-row>
        <a-form-model
          v-if="isticketShow"
          ref="ruleForm2"
          :model="ticketForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          style="margin-top: 15px"
        >
          <a-form-model-item
            ref="invoiceAmount"
            label="本次开票金额"
            prop="invoiceAmount"
            :rules="{
              required: true,
              message: '请输入'
            }"
          >
            <a-input-number :min="0" :max="999999" v-model="ticketForm.invoiceAmount" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item
            ref="invoiceDate"
            label="本次开票时间"
            prop="invoiceDate"
            :rules="{
              required: true,
              message: '请选择'
            }"
          >
            <a-date-picker
              :disabled-date="disabledDate"
              v-model="ticketForm.invoiceDate"
              placeholder="选择开票时间"
              @change="onChange"
              @ok="onOk"
              style="width: 320px"
            />
          </a-form-model-item>
          <a-form-model-item ref="file" label="附件" prop="file">
            <a-upload
              accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg, .jpeg, .png"
              :before-upload="beforeUpload2"
              list-type="picture"
              class="upload-list-inline"
              :fileList="fileList2"
              :default-file-list="[]"
              @change="upLoad2"
            >
              <a-button> <a-icon type="upload" /> 点击上传 </a-button>
            </a-upload>
          </a-form-model-item>
          <a-form-model-item ref="remark" label="备注" prop="remark">
            <a-input v-model="ticketForm.remark" type="textarea" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
        <a-row class="header-title" v-if="isticketShow">
          <div class="title-info">开票记录</div>
          <hr class="title-line" />
        </a-row>
        <a-table
          rowKey="id"
          :loading="loading3"
          :columns="ticketColumns"
          :data-source="ticketList"
          :pagination="false"
          :scroll="{ y: 120 }"
          style="margin-top: 10px"
        >
          <a slot="invoiceAmount" style="position: relative" slot-scope="text, record">
            <img
              :src="abolitionImg"
              v-if="record.isVoid === false"
              style="position: absolute; top: -16px; left: -15px; width: 50px; height: 50px"
            />
            <p style="margin-left: 20px; margin-bottom: 0">
              {{ text }}
            </p>
          </a>
          <a slot="action" slot-scope="text, record">
            <span v-if="record.isVoid === true" class="primary_color">
              <a-popconfirm :title="'确定作废吗?'" @confirm="wasteTicket(record)"> 作废 </a-popconfirm>
            </span>
            <span v-if="record.isVoid === false" style="color: #a6a8b4"> 作废 </span>
          </a>
          <a slot="invoiceDate" slot-scope="text">
            {{ text ? moment(text).format("YYYY-MM-DD") : "-" }}
          </a>
        </a-table>
      </a-modal>
      <!-- 废除 -->
      <a-modal v-model="abolitionVisible" title="废除客户回款记录确认" @ok="handleAbolition" :width="450">
        <div style="display: flex; align-items: center; justify-content: left">
          <div style="margin-left: 15px; font-size: 35px" class="primary_color">
            <a-icon type="question-circle" />
          </div>
          <div style="margin-left: 15px; position: relative; top: 3px; font-size: 16px; font-weight: 500; color: #000000ff">
            <span
              >您确定要
              <span style="color: #ec5252ff">删除</span>
              该条记录吗？删除后不可恢复，但可在本月客户明细单中重新点击生成回款记录。</span
            >
          </div>
        </div>
      </a-modal>
      <!-- 恢复 -->
      <a-modal v-model="restoreVisible" title="废除客户回款记录确认" @ok="handleRestore" :width="450">
        <div style="display: flex; align-items: center; justify-content: left">
          <div style="margin-left: 15px; font-size: 35px" class="primary_color">
            <a-icon type="question-circle" />
          </div>
          <div style="margin-left: 15px; position: relative; top: 3px; font-size: 16px; font-weight: 500; color: #000000ff">
            <span>您确定要 <span style="color: #5bdab0ff">恢复</span> 该条记录？</span>
          </div>
        </div>
      </a-modal>
      <!-- 新增记录 -->
      <a-modal v-model="addVisible" title="新增记录" @ok="handleAddOk" :width="500">
        <a-form-model ref="ruleForm3" :model="addForm" :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-top: 15px">
          <a-form-model-item
            :rules="{
              required: true,
              message: '请选择'
            }"
            ref="editCompanyId"
            label="用工单位名称"
            prop="editCompanyId"
          >
            <a-select
              v-model="addForm.editCompanyId"
              placeholder="请选择"
              option-filter-prop="children"
              showSearch
              :filter-option="filterOption"
              @change="changeId"
            >
              <a-select-option v-for="item in options" :key="item.id" :value="item.id" class="select-text"
                >{{ item.name }}
              </a-select-option>
              <a-icon slot="suffixIcon" type="caret-down" class="select-icon" style="display: block; margin-left: 10px" />
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :rules="{
              required: true,
              message: '请输入'
            }"
            ref="serviceFeeAmount"
            label="服务费金额"
            prop="serviceFeeAmount"
          >
            <a-input-number :min="0" :max="999999" v-model="addForm.serviceFeeAmount" placeholder="请输入" @change="calculate" />
          </a-form-model-item>
          <a-form-model-item
            :rules="{
              required: true,
              message: '请输入'
            }"
            ref="laborCost"
            label="人力成本"
            prop="laborCost"
          >
            <a-input-number :min="0" :max="999999" v-model="addForm.laborCost" placeholder="请输入" @change="calculate" />
          </a-form-model-item>
          <a-form-model-item
            :rules="{
              required: false,
              message: '请输入'
            }"
            ref="fine"
            label="滞纳金"
            prop="fine"
          >
            <a-input-number :min="0" :max="999999" v-model="addForm.fine" placeholder="请输入" @change="calculate" />
          </a-form-model-item>
          <a-form-model-item
            :rules="{
              required: true,
              message: '请输入'
            }"
            ref="totalAmount"
            label="应到账金额"
            prop="totalAmount"
          >
            <a-input-number disabled :min="0" v-model="addForm.totalAmount" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-layout>
</template>
<script>
const receivableColumns = [
  {
    title: "实际到账金额",
    dataIndex: "receiveAmount",
    key: "receiveAmount",
    width: 120
  },
  {
    title: "未到账金额",
    dataIndex: "noReceiveAmount",
    key: "noReceiveAmount",
    width: 110
  },
  {
    title: "回款时间",
    dataIndex: "payBackDate",
    key: "payBackDate",
    scopedSlots: { customRender: "payBackDate" },
    width: 140
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 90
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 90
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 60
  }
];
const ticketColumns = [
  {
    title: "实际开票金额",
    dataIndex: "invoiceAmount",
    key: "invoiceAmount",
    width: 120,
    scopedSlots: { customRender: "invoiceAmount" }
  },
  {
    title: "未开票金额",
    dataIndex: "noInvoiceAmount",
    key: "noInvoiceAmount",
    width: 110
  },
  {
    title: "开票时间",
    dataIndex: "invoiceDate",
    key: "invoiceDate",
    scopedSlots: { customRender: "invoiceDate" },
    width: 140
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 90
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 90
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 60
  }
];
const columns = [
  {
    title: "用工单位名称",
    dataIndex: "companyName",
    key: "companyName",
    width: 250,
    fixed: "left"
  },
  {
    title: "负责人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 120
    // fixed: "left"
  },
  {
    title: "账单月份",
    dataIndex: "monthly",
    key: "monthly",
    width: 120,
    scopedSlots: { customRender: "monthly" }
  },
  {
    title: "应回款金额",
    dataIndex: "totalAmount",
    key: "totalAmount",
    width: 130
  },
  {
    title: "已到账金额",
    dataIndex: "amountPaid",
    key: "amountPaid",
    width: 130
  },
  {
    title: "未到账金额",
    dataIndex: "unpaidAmount",
    key: "unpaidAmount",
    width: 130,
    scopedSlots: { customRender: "unpaidAmount" }
  },
  {
    title: "回款状态",
    dataIndex: "payBackStatus",
    key: "payBackStatus",
    width: 130,
    scopedSlots: { customRender: "payBackStatus" }
  },
  {
    title: "已开票金额",
    dataIndex: "invoicedAmount",
    key: "invoicedAmount",
    width: 130
  },
  {
    title: "未开票金额",
    dataIndex: "uninvoicedAmount",
    key: "uninvoicedAmount",
    width: 130,
    scopedSlots: { customRender: "uninvoicedAmount" }
  },
  {
    title: "开票状态",
    dataIndex: "invoiceStatus",
    key: "invoiceStatus",
    width: 130,
    scopedSlots: { customRender: "invoiceStatus" }
  },

  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 180,
    fixed: "right"
  }
];
import {
  getSettlements,
  addSettlements,
  addTicket,
  getTicket,
  getReceivable,
  addReceivable,
  restoreReord,
  deleteReord,
  deleteBackRecord,
  wasteTicketReord,
  getSum
} from "@/api/settlement/settlement";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
import moment from "moment";
import axios from "axios";
import { isContainByString } from "@/utils/index";
const mixin = new ExportMixin();
export default {
  mixins: [mixin],
  data() {
    return {
      fileList2: [],
      url: [],
      fileList: [],
      amountParams: {},
      loading2: false,
      loading3: false,
      isBackShow: true,
      isticketShow: true,
      popoverShow: false,
      addForm: {
        adminName: null,
        serviceFeeAmount: null,
        laborCost: null,
        fine: null,
        totalAmount: null
      },
      now: moment().format("YYYY-MM"),
      askImg: require("@/assets/icons/ask.png"),
      abolitionImg: require("@/assets/home/feichu.png"),
      receivableColumns,
      ticketColumns,
      receivableVisible: false,
      ticketVisible: false,
      abolitionVisible: false,
      restoreVisible: false,
      addVisible: false,
      inputName: null,
      form: {},
      urlList: [],
      urlList2: [],
      ticketForm: {},
      receivableForm: {},
      loading: false,
      selectedRowKeys: [],
      selectRowKey: [],
      dataList: [],
      columns,
      continue: true,
      selectName: null,
      payBackStatus: null,
      invoiceStatus: null,
      groupList: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      companyId: this.$store.state.hr.companyId,
      month: moment().format("MM"),
      year: moment().format("YYYY"),
      abolitionRecord: null,
      restoreRecord: null,
      ticketList: [],
      receivableList: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      isContainByString
    };
  },
  computed: {
    options() {
      return this.$store.state.hr.companyList;
    }
  },
  created() {
    this.getSettlementsList();
  },
  beforeDestory() {},
  methods: {
    download(i) {
      this.params = {
        // companyId: this.companyId,
        monthly: this.month,
        yearly: this.year,
        payBackStatus: this.payBackStatus,
        invoiceStatus: this.invoiceStatus,
        companyOrAdminName: this.inputName
      };
      this.url = `/salary/api/v1/customerSettlements/export`;
      this.excelName = `${this.$store.state.hr.companyName}_` + "客户结算表导出详情" + ".xlsx";
      this.getDownload();
    },
    goDetail(record) {
      this.$router.push({
        path: this.isContainByString("settlementAdmin") ? "/settlementAdmin/record/details" : "/settlement/record/details",
        query: {
          routerData: JSON.stringify(record)
        }
      });
    },
    precision(num1, num2) {
      const num1Digits = (num1.toString().split(".")[1] || "").length;
      const num2Digits = (num2.toString().split(".")[1] || "").length;
      const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
      for (var i = 0; i < Math.max(num1Digits, num2Digits); i++) {
        num1 = num1 * 10;
        num2 = num2 * 10;
      }
      return (num1 + num2) / baseNum;
    },
    calculate(e) {
      var arr = [];
      if (this.addForm.serviceFeeAmount) {
        arr.push(parseFloat(this.addForm.serviceFeeAmount));
      }
      if (this.addForm.laborCost) {
        arr.push(parseFloat(this.addForm.laborCost));
      }
      if (this.addForm.fine) {
        arr.push(parseFloat(this.addForm.fine));
      }
      getSum(arr).then((res) => {
        this.$set(this.addForm, "totalAmount", res.data);
      });
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current > moment().endOf("day");
    },

    beforeUpload(file) {
      const formData = new FormData();
      formData.append("files", file);
      axios({
        url: `/file/api/v1/site/default/upload/attachment`,
        method: "post",
        data: formData,
        headers: { token: this.$store.state.auth.token }
      })
        .then((res) => {
          res.data.data.forEach((item, index) => {
            this.urlList.push(item);
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      return false;
    },
    beforeUpload2(file) {
      const formData = new FormData();
      formData.append("files", file);
      axios({
        url: `/file/api/v1/site/default/upload/attachment`,
        method: "post",
        data: formData,
        headers: { token: this.$store.state.auth.token }
      })
        .then((res) => {
          res.data.data.forEach((item, index) => {
            this.urlList2.push(item);
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      return false;
    },
    upLoad(file) {
      this.fileList = file.fileList;
    },
    upLoad2(file) {
      this.fileList2 = file.fileList;
    },
    // 废除开票记录
    wasteTicket(record) {
      this.loading3 = true;
      wasteTicketReord(record.id).then((res) => {
        this.showTicket(this.ticketRecord);
        this.$notification["success"]({
          message: "success",
          description: "废除成功"
        });
      });
    },
    //
    handleCancel() {
      this.fileList = [];
    },
    handleCancel2() {
      this.fileList2 = [];
    },
    // 删除回款记录
    deleteBack(record) {
      this.loading2 = true;
      deleteBackRecord(record.id).then((res) => {
        this.showReceivable(this.receivableRecord);
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
      });
    },
    // 废除客户结算记录点击确定
    handleAbolition() {
      deleteReord(this.abolitionRecord.id).then((res) => {
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
        this.getSettlementsList();
        this.abolitionVisible = false;
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
      });
    },
    // 恢复客户结算记录点击确定
    handleRestore() {
      restoreReord(this.restoreRecord.id).then((res) => {
        this.getSettlementsList();
        this.restoreVisible = false;
        this.$notification["success"]({
          message: "success",
          description: "恢复成功"
        });
      });
    },
    // 日期选择器变化（筛选框）
    monthChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.month = moment(e).format("MM");
      this.year = moment(e).format("YYYY");
      this.getSettlementsList();
    },
    // 新增记录框
    showAdd() {
      this.addVisible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm3.clearValidate();
      });
      this.addForm = {};
    },
    // 新增记录点击确定
    handleAddOk() {
      setTimeout(() => {
        this.continue = true; // 点击一次时隔两秒后才能再次点击
      }, 2000);
      if (this.continue === true) {
        this.continue = false;
        this.$refs.ruleForm3.validate((valid) => {
          if (valid) {
            if (this.addForm.totalAmount === 0) {
              this.$notification["error"]({
                message: "错误",
                description: "应到账金额应大于0"
              });
            } else {
              addSettlements({
                monthly: moment().format("MM"),
                yearly: moment().format("YYYY"),
                companyId: this.addForm.editCompanyId,
                companyName: this.editCompanyName,
                laborCost: this.addForm.laborCost,
                fine: this.addForm.fine,
                serviceFeeAmount: this.addForm.serviceFeeAmount,
                totalAmount: this.addForm.totalAmount
                // adminName: this.addForm.adminName
              }).then((res) => {
                this.addVisible = false;
                this.$notification["success"]({
                  message: "success",
                  description: "新增成功"
                });
                this.getSettlementsList();
              });
            }
          }
        });
      }
    },
    // 确定废除？
    showAbolition(record) {
      this.abolitionVisible = true;
      this.abolitionRecord = record;
    },
    // 确定恢复？
    showRestore(record) {
      this.restoreVisible = true;
      this.restoreRecord = record;
    },
    // 开票
    showTicket(record, tag) {
      if (tag === 1) {
        this.isticketShow = true;
      }
      if (tag === 2) {
        this.isticketShow = false;
      }
      this.ticketList = [];
      this.ticketRecord = record;
      getTicket(this.ticketRecord.id).then((res) => {
        this.ticketList = res.data ? res.data : [];
        this.loading3 = false;
        this.ticketVisible = true;
        if (this.isticketShow === true) {
          this.$nextTick(() => {
            this.$refs.ruleForm2.clearValidate();
          });
        }

        this.ticketForm = {};
      });
    },
    // 开票点击确定
    handleTicketOk() {
      if (this.isticketShow === true) {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            addTicket({
              invoiceDate: this.ticketForm.invoiceDate,
              invoiceAmount: this.ticketForm.invoiceAmount,
              remark: this.ticketForm.remark,
              customerSettlementId: this.ticketRecord.id,
              file: this.urlList2
            }).then((res) => {
              this.ticketVisible = false;
              this.$notification["success"]({
                message: "success",
                description: "开票成功"
              });
              this.getSettlementsList();
            });
          }
        });
      } else {
        this.ticketVisible = false;
      }
    },
    // 回款
    showReceivable(record, tag) {
      this.urlList = [];

      if (tag === 1) {
        this.isBackShow = true;
      }
      if (tag === 2) {
        this.isBackShow = false;
      }
      this.receivableList = [];
      this.receivableRecord = record;
      getReceivable(this.receivableRecord.id).then((res) => {
        this.receivableList = res.data ? res.data : [];
        this.loading2 = false;
        this.receivableVisible = true;

        if (this.isBackShow === true) {
          this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
          });
        }
        this.receivableForm = {};
      });
    },
    // 回款点击确定
    handleReceivableOk() {
      if (this.isBackShow === true) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addReceivable({
              payBackDate: this.receivableForm.payBackDate,
              receiveAmount: this.receivableForm.receiveAmount,
              remark: this.receivableForm.remark,
              customerSettlementId: this.receivableRecord.id,
              file: this.urlList
            }).then((res) => {
              this.receivableVisible = false;
              this.$notification["success"]({
                message: "success",
                description: "回款成功"
              });
              this.getSettlementsList();
            });
          }
        });
      } else {
        this.receivableVisible = false;
      }
    },
    // 开票状态筛选
    handleChange(e) {
      this.invoiceStatus = e;
    },
    handleChange2(e) {
      this.payBackStatus = e;
    },
    popoverOk() {
      if (
        (this.amountParams.totalAmountStart && !this.amountParams.totalAmountEnd && this.amountParams.totalAmountEnd !== 0) ||
        (!this.amountParams.totalAmountStart && this.amountParams.totalAmountStart !== 0 && this.amountParams.totalAmountEnd)
      ) {
        this.$message.warning("应回款金额筛选请输入完整金额范围");
      } else if (
        (this.amountParams.amountPaidStart && !this.amountParams.amountPaidEnd && this.amountParams.amountPaidEnd !== 0) ||
        (!this.amountParams.amountPaidStart && this.amountParams.amountPaidStart !== 0 && this.amountParams.amountPaidEnd)
      ) {
        this.$message.warning("已到账金额筛选请输入完整金额范围");
      } else if (
        (this.amountParams.unpaidAmountStart && !this.amountParams.unpaidAmountEnd && this.amountParams.unpaidAmountEnd !== 0) ||
        (!this.amountParams.unpaidAmountStart && this.amountParams.unpaidAmountStart !== 0 && this.amountParams.unpaidAmountEnd)
      ) {
        this.$message.warning("未到账金额筛选请输入完整金额范围");
      } else {
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
        this.popoverShow = false;
        this.getSettlementsList();
      }
    },
    // 分页
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getSettlementsList();
    },
    // 搜索
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getSettlementsList();
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    async changeId(id, e, tag) {
      this.editCompanyName = e.componentOptions.children[0].text;
    },
    onOk() {},
    onChange() {},
    getSettlementsList() {
      this.loading = true;
      getSettlements({
        companyOrAdminName: this.inputName,
        companyId: this.companyId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        invoiceStatus: this.invoiceStatus,
        payBackStatus: this.payBackStatus,
        monthly: this.month,
        yearly: this.year,
        ...this.amountParams
      }).then((res) => {
        this.selectedRowKeys = [];
        this.loading = false;
        this.contractlist = res.data.entities;
        this.pagination.total = res.data && res.data.entityCount;
        this.dataList = res.data.entities;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.header-title {
  display: flex;
  height: 30px;
  padding-top: 3px;
  .title-info {
    font-size: 16px;
    font-weight: 500;
    color: #3c3d43;
    line-height: 24px;
    width: 120px;
    height: 22px;
    margin-right: 10px;
    padding-left: 15px;
  }
  .title-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;
    background-color: var(--primary);
  }
  .title-line {
    flex: 1;
    margin-top: 10px;
    height: 1px;
    border: none;
    background: #e8e8e8;
  }
}
.head {
  padding: 20px;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  .anticon-left {
    color: #595959;
    font-size: 20px;
    margin-top: 18px;
  }
  .left2 {
    z-index: 3;
    left: 65px;
    position: absolute;
    color: #595959;
    font-size: 16px;
    margin-top: -3px;
  }
}
.tableBox {
  padding-left: 20px;
  padding-right: 20px;
}
</style>
